<template>
   <div class="space-y-1">
        <div class="label text-base-content font-medium flex items-center justify-between">
            <div>
                <span class="text-red-500" v-show="_required">*</span>
                {{options.name}}
            </div>
           <slot name="title">
                <span class="text-xs text-base-content/60">
                    {{_title}}
                </span>
            </slot>
        </div>
        <Field :name="_key_name" 
            v-model="val" 
            :rules="options.rules || ''"
             v-slot="{ field, errors, errorMessage }"
             >
              <slot name="input-item" :errorMessage="errorMessage" :field="field" :placeholder="_placeholder">
                <label class="input w-full" :class="{'input-error':errorMessage}">
                    <slot :errorMessage="errorMessage" :field="field" :placeholder="_placeholder">
                        <font-awesome-icon :icon="options.icon" v-if="options.icon"></font-awesome-icon>
                        <input
                            v-if="!options.type || options.type=='input' || options.type=='text'"
                            type="text"
                            v-bind="field"
                            :disabled="_disabled"
                            :placeholder="_placeholder" />
                        <input
                        v-else-if="options.type=='password'"
                        type="password"
                        v-bind="field"
                        :disabled="_disabled"
                        autocomplete="current-password"
                        :placeholder="_placeholder" />
                        <input
                                v-else-if="options.type=='email'"
                                type="email"
                                v-bind="field"
                                :disabled="_disabled"
                                :placeholder="_placeholder" />
                        <textarea
                            v-else-if="options.type=='textarea'"
                            v-bind="field"
                            class="textarea w-full"
                            :class="{'textarea-error':errorMessage}"
                            rows="6"
                            :disabled="_disabled"
                            :placeholder="_placeholder">
                        </textarea>
                        <select v-else-if="options.type=='select'"
                                class="select w-full"
                                :class="{'select-error':errorMessage}"
                                v-bind="field"
                                :disabled="_disabled">
                            <option v-if="typeof options['placeholderValue']!='undefined'" :value="options['placeholderValue']">
                                {{options.placeholder || $t('Please select')}}
                            </option>
                            <option v-for="(val,index) in array_get(datas.maps,_map_key)" :value="index">{{val}}</option>
                        </select>
                            <div class="row" v-else-if="options.type=='checkbox'">
                                <div v-for="(item,index) in array_get(datas.maps,_map_key)" class="col-sm-4">
                                    <label>
                                        <input v-bind="field"  :value="index" :disabled="_disabled" type="checkbox" />
                                        {{item}}
                                    </label>
                                </div>
                            </div>
                            <div class="row" v-else-if="options.type=='radio'">
                                <div v-for="(item,index) in array_get(datas.maps,_map_key)" class="col-sm-4">
                                    <label>
                                        <input v-bind="field"  :value="index" :disabled="_disabled" type="radio"  />
                                        {{item}}
                                    </label>
                                </div>
                            </div>
                            <div class="input-group" v-else-if="options.type=='icon'">
                                <input
                                    type="text"
                                    v-bind="field"
                                    class="input w-full"
                                    :disabled="_disabled"
                                    :placeholder="_placeholder">
                                <div class="input-group-addon">
                                    <i class="fa" :class="itemObj[_key]"></i>
                                </div>
                            </div>
                            <div class="input-group" v-else-if="options.type=='url'">
                                <input
                                    type="text"
                                    v-bind="field"
                                    class="input w-full"
                                    :disabled="_disabled"
                                    :placeholder="_placeholder">
                                <div class="input-group-addon">
                                    <a v-if="itemObj[_key]" :href="itemObj[_key]" target="_blank">
                                        <i class="fa fa-link"></i>
                                    </a>
                                    <i v-else class="fa fa-link"></i>
                                </div>
                            </div>
                    </slot>
                </label>
              </slot>
             
           
            <p class="text-error" v-show="errorMessage">
                {{errorMessage}}
            </p>
        </Field>
    </div>
</template>

<script>
    import { Field } from 'vee-validate';
    //表单项目
    export default {
        name: "editItem",
        components: {
            Field
        },
        props: {
            //配置选项
            options:{
                type: [Object],
                default: function () {
                    return {};
                }
            },
            datas:{
                type: [Object],
                default: function () {
                    return {
                        error:{},
                        data:{
                            row:{},
                            configUrl:{}
                        }
                    };
                }
            },
            keyName:{
                type: [String],
                default: function () {
                    return '';
                }
            },
            disabled:{
                type: [Boolean],
                default: function () {
                    return undefined;
                }
            },
            modelValue:{
                default: function () {
                    return undefined;
                }
            }
        },
        emits: ['update:modelValue'],
        computed:{
            _key(){
               return this.getKey();
            },
            itemObj(){
                return this.getItemObj();
            },
            _map_key(){
                return this.options.map_key || this.keyName;
            },
            _required(){
                if (typeof this.options.rules=="object"){
                    return this.options.required;
                }
               return this.options.required || (this.options.rules || '').indexOf('required')!=-1
            },
            _placeholder(){
                if(typeof this.options.placeholder=="function"){
                    return this.options.placeholder();
                }
                return this.options.placeholder || this.$t('enter',{name:this.options.name});
            },
            _title(){
                return this.options.title || '';
            },
            _disabled(){
                if(typeof this.disabled!="undefined"){
                    return this.disabled;
                }
                if(typeof this.datas.url=="undefined" && typeof this.options.disabled=="undefined"){
                    return false;
                }
                return !this.datas.url || this.options.disabled;
            },
            _key_name(){
                return this.keyName || this.key;
            }
        },
        watch:{
            options(){

            },
            val(val,old) {
                if(JSON.stringify(val)!=JSON.stringify(this.modelValue)){
                    this.$emit('update:modelValue', val); //修改值
                }
            },
            modelValue(val,old){              
                if(JSON.stringify(val)!=JSON.stringify(this.val)){
                    this.val = val;
                }
            },
        },
        data(){
            let val;
            if(typeof this.modelValue!="undefined"){
                val = this.modelValue;
            }else if(
                typeof this.datas?.data!="undefined" &&
                typeof this.datas?.data?.row!="undefined" &&
                this.keyName && 
                typeof this.datas?.data?.row[this.keyName]!="undefined"
            ){
                let key = this.getKey();
                val = this.getItemObj()[key];
            }else{
                val = '';
            }
            return {
                val: copyObj(val),
                key:this.generateRandomString(),
            }
        },
        methods:{
            generateRandomString(length = 10) {
                return Math.random().toString(36).substring(2, 2 + length);
            },
            getItemObj(){
                let keys = this.keyName.split('.');
                keys.pop();
                let _key = keys.join('.');
                if(!_key){
                    return this.datas.data.row;
                }
                return array_get(this.datas,'data.row.'+_key);
            },
            getKey(){
                let keys = this.keyName.split('.');
                return keys[keys.length-1];
            }
        }
    }
</script>


